<template>
	<view class="container" v-if="config && config.config">
		<form @submit="formSubmit">
			<view class="verification">
				<view class="clearfix list">
					<view class="fl">{{userInfo.showPhone}}</view>
					<!-- <input type="number" :value="userInfo.showPhone" disabled="true" name="phone" class="fl"></input> -->
					<view class="fr">
						<view class="box receive" :style="'background:' + config.config.mobile_head_color" v-if="judge > 0" @tap="loop">
							<lang keywords="获得验证码"></lang> 
						</view>
						<view class="box send_out" v-else>
							<lang keywords="已发送"></lang>(<text class="second">{{time}}</text>s)
						</view>
					</view>
				</view>
				<view class="list">
					<input type="number" :value="userInfo.code" name="code" :placeholder="placeholder" maxlength="4"></input>
				</view>
			</view>
			<view class="button">
				<button formType="submit" :style="'background:' + config.config.mobile_head_color">
					<lang keywords="下一步 绑定新手机"></lang>
				</button>
			</view>
		</form>
		<!-- #ifdef MP-WEIXIN -->
		<view class="wxapp-button" v-if="!config.config.international_phone">
			<button size="mini" :plain="true" open-type="getPhoneNumber" @getphonenumber="getUserWxPhone">
				<image src="../../staic/images/weixin_small.png"></image>
				<lang keywords="快速修改为微信手机号"></lang>
			</button>
		</view>
		<!-- #endif -->
		
		<!-- #ifdef MP-ALIPAY -->
		<view class="wxapp-button alipay" v-if="!config.config.international_phone">
			<button size="mini" :plain="true" open-type="getPhoneNumber" @getphonenumber="getAlipayPhone">
				<text class="iconfont icon-zhifubao"></text>
				<lang keywords="快速修改为支付宝手机号"></lang>
			</button>
		</view>
		<!-- #endif -->
		<userinfo :options="user_options" @getUserscope="getUserInfo" @toLogin="getUserInfo"></userinfo>
	</view>
</template>

"<script>
	import common from '../../utils/common.js';
	var app = getApp();
	var _this;

	export default {
		data() {
			return {
				userInfo: {},
				judge: '1',
				time: 60,
				session_key: '',
				placeholder: '请输入验证码',
				config: '',
				user_options: {}
			};
		},
		onLoad: function(options) {
			// #ifdef H5
			common.webToMiniapp('/pages/my/number', options)
			// #endif
			
			_this = this;
			common.setMainColor(_this); //调用应用实例的方法获取全局数据

			wx.setNavigationBarTitle({
				title: common.changeTxt('验证原手机')
			});
			_this.placeholder = common.changeTxt(_this.placeholder)
			
			if (!app.globalData.is_login) {
				this.user_options = {
					toLogin: true,
					showCancel: false,
					refuseIsShow: true
				}
			} else {
				this.userInfo = app.globalData.userInfo
			}
		},
		onShow () {
			// #ifdef H5
			common.hideWxShare()
			// #endif
		},
		methods: {
			getUserInfo (e) {
				if (e && e.userInfo) {
					this.userInfo = e.userInfo
				}
			},
			getAlipayPhone (e) {
				console.log('获取支付宝手机号111', e)
				my.getPhoneNumber({
					success: (res) => {
						let encryptedData = res.response;
						console.log('成功',res);
						common.post('Login&a=alipayapp_deciphering', {response: encryptedData}, function (data) {
							if (data && data.phone) {
								app.globalData.userInfo.phone = data.phone
								common.navigateBack(pageBackNum)
							}
						})
					},
					fail: (res) => {
						console.log('失败',res);
						wx.showToast({
							title: common.changeTxt('获取手机号失败'),
							icon: 'none'
						})
					},
				});
			},
			getUserWxPhone: function(e) {
				console.log(e);

				if (e.detail.errMsg == 'getPhoneNumber:ok') {
					var object = {
						encryptedData: e.detail.encryptedData,
						iv: e.detail.iv,
						type: 'change_user_phone'
					};
					app.getUserWxPhone(object, function(result) {
						console.log(result);
						app.globalData.userInfo = result;
						wx.navigateBack();
					});
				}
			},
			formSubmit: function(e) {
				console.log(e.detail);

				if (e.detail.value.code.length != 4) {
					wx.showModal({
						title: common.changeTxt('提示'),
						content: common.changeTxt('请输入4位的验证码'),
						showCancel: false
					});
					return false;
				}
				
				let param = {
					phone: this.userInfo.phone,
					code: e.detail.value.code,
					type: 3
				}
				common.post('Login&a=verifyCode', param, function(result){
					wx.navigateTo({
						url: "newnumber?source=edit"
					});
				});
			},
			loop: function() {
				let param  = {
					phone_country_type: _this.userInfo.phone_country_type,
					phone: _this.userInfo.phone,
					type: 3
				}
				common.post('Login&a=sendCode', param, function(){
					uni.hideToast();
				});
				this.judge = '0'
				var loop_timer = setInterval(function() {
					if (_this.time <= 1) {
						clearInterval(loop_timer);

						_this.judge = 1
						_this.time = 60
					} else {
						_this.time = _this.time - 1
					}
				}, 1000);
			}
		}
	};
</script>
<style>
	.verification {
		background: #fff;
		margin: 20rpx 0;
		border-bottom: #f1f1f1 2rpx solid;
		border-top: #f1f1f1 2rpx solid;
	}

	.verification .list {
		border-bottom: #f1f1f1 2rpx solid;
		padding: 24rpx 20rpx;
	}

	.verification .list:last-child {
		border-bottom: none;
	}

	.verification .box {
		padding: 6rpx 30rpx;
		color: #fff;
	}

	.verification .box button {
		margin: 0px;
		padding: 0px;
		background: #06c1ae;
		color: #fff;
		line-height: 1.5;
		font-size: 28rpx;
	}

	.verification .box button:after {
		border: none;
	}

	.verification .receive {
		background: #06c1ae;
		white-space: nowrap;
	}

	.verification .send_out {
		background: #ccc;
	}

	.button button {
		background: #06c1ae;
		color: #fff;
		margin: 0 20rpx;
		font-size: 32rpx;
		line-height: 80rpx;
		text-align: center;
		border-radius: 20rpx;
	}

	.wxapp-button {
		margin-top: 160rpx;
		text-align: center;
	}

	.wxapp-button button {
		background: none;
		font-size: 28rpx;
		color: #51c332;
		border-color: #51c332;
	}

	.wxapp-button button image {
		width: 40rpx;
		height: 40rpx;
		vertical-align: middle;
		margin-right: 4rpx;
	}
	
	.wxapp-button.alipay .icon-zhifubao{
		margin-right: 10rpx;
		vertical-align: middle;
		font-size: 40rpx;
	}
	
	.wxapp-button.alipay button{
		color:#1CABEF;
		border-color:#1CABEF;
	}
</style>
